<template>
  <div class="table-container">
    <el-table :data="props.tableObj.tableData" :header-row-style="setHeaderStyle" default-expand-all row-key="id" :expand-row-keys="defaultExpand" @expand-change="expandChange">
      <slot name="prev"></slot>
      <CustomTableColumn key="parent" :table-header="props.tableObj.tableHeader" :sortFlag="props.sortFlag" @handleSort="handleSort" />
      <slot name="next"></slot>

      <el-table-column type="expand">
        <template #default="{ row }">
          <h3>{{ row.childrenTitle }}</h3>
          <el-table :data="row.children">
            <CustomTableColumn key="children" :tableHeader="props.tableObj.familyHeader" :sortFlag="childrenSortFlag" @handleSort="handleChildrenSort" />
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import CustomTableColumn from './CustomTableColumn.vue'
import { ref, onMounted } from 'vue'
import type { PropType } from 'vue'
import type { TableObj } from '@/components/custom-table/types'
import { sortArray } from '@/utils/array-sort'

// interface ChildrenItem {
//   id: number;
//   mateialName: string;
//   code: string;
//   amount: string;
//   quantity: string;
//   averagePrice: string;
// }
// export interface TableData {
//   id: number;
//   date: string;
//   name: string;
//   num: number;
//   nameRate: string;
//   numRate: string;
//   childrenTitle?: string;
//   children: ChildrenItem[];
// }
// export type TableObj = {
//   tableHeader: TableHeader;
//   tableData: TableData[];
//   familyHeader: TableHeader;
// }
interface Emits {
  (e: 'handleSort', val: string): void;
  (e: 'handleChildrenSort', val: string): void;
}

const props = defineProps({
  tableObj: {
    type: Object as PropType<TableObj>,
    default: () => {
      return {
        tableHeader: [],
        tableData: [],
        familyHeader: []
      }
    }
  },
  sortFlag: {
    type: String,
    require: true
  }
})

// 子表格排序标志
const childrenSortFlag = ref<string>('amount')

// 默认展开行
const defaultExpand = ref<number[]>([])

onMounted(() => {
  const len = props.tableObj.tableData.length
  if (len > -1) {
    defaultExpand.value.push(props.tableObj.tableData[len - 1].id) // 默认展开最后一行
  }
})

const expandChange = (row:any, _expandedRows: any) => {
  const index = defaultExpand.value.indexOf(row.id)
  if (index > -1) {
    defaultExpand.value.splice(index, 1)
  } else {
    defaultExpand.value.push(row.id)
  }
}

// 主表格的排序功能
const emits = defineEmits<Emits>()
const handleSort = (value: string) => {
  emits('handleSort', value)
}

// 展开行的排序功能
const handleChildrenSort = (value: string) => {
  props.tableObj.tableData.forEach(item => {
    if (item.children && item.children.length > 0) {
      item.children = sortArray(item.children, value as string)
    }
  })
  childrenSortFlag.value = value
}

// 设置表头样式
const setHeaderStyle = (): Partial<CSSStyleDeclaration> => {
  const obj: Partial<CSSStyleDeclaration> = {
    color: '#000',
    backgroundColor: '#0a0a22'
  }
  return obj
}
</script>
